<template>
  <div
    class="reference"
    :style="{
      marginTop: mt,
    }"
    v-if="list.length > 0"
  >
    <template v-for="(item2, index2) in list" :key="index2">
      <div class="ysj" :key="index2" v-if="index2 < 4">
        <image class="img" :src="item2.avatar" />
        <div class="mask" v-if="index2 === 3">···</div>
      </div>
    </template>
    {{ list.length }}位艺术家推荐
  </div>
</template>
<script setup lang="ts">
defineOptions({ name: 'Reference' })

defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  mt: {
    type: String,
    default: '0rpx',
  },
})
</script>
<style lang="scss" scoped>
.reference {
  display: flex;
  align-items: center;
  height: 38rpx;
  font-size: 20rpx;
  color: var(--color4);
  .ysj {
    position: relative;
    display: inline-block;
    margin-left: -10rpx;
    &:first-child {
      margin-left: 0;
    }
    .img {
      width: 38rpx;
      height: 38rpx;
      border: 2rpx solid #fff;
      border-radius: 50%;
    }
    &:last-child {
      margin-right: 12rpx;
      .img {
        border: none;
      }
    }
    .mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      font-size: 30rpx;
      line-height: 38rpx;
      color: #fff;
      text-align: center;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
    }
  }
}
</style>
